<template>
	<view class="specials-nav">
		<scroll-view class="scroll" scroll-x="true">
			<view 
			v-for="(item,index) in detail" 
			class="item"
			:class="{on:index==active}"
			@click="introduceGo(index)"
			:key="index"
			>{{item}}</view>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 头部横向滚动导航
	 * @property {Number} productid 产品id
	 * @property {Number} typeid 模型id
	 */
	export default {
		name: 'stTopScrollNav',
		props: {
			detail: {
				type: Array,
				default () {
					return []
				}
			},
			active: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			
			introduceGo(index){
				this.$emit('scroll',index)
			}
			
		}
	}
</script>

<style lang="scss">
	
	.specials-nav{
		position: fixed;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 111;
		padding-left: 40rpx;
		color: $uni-text-color-grey;
		background-color: #fff;
		.scroll{
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;
		}
		&,.item{
			height: 80rpx;
		}
		.item{
			box-sizing: border-box;
			display: inline-block;
			max-width: 10em;
			@extend .ellipse;
			margin-right: 28rpx;
			padding: 0 2rpx;
			line-height: 77rpx;
			border-bottom: 5rpx solid #fff;
			&.on{
				color: $uni-text-color-primary;
				border-color: $uni-color-primary;
			}
		}
	}
</style>
